<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daas HDFS Usage</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
</head>
<body>
    <div style="margin: auto;"><h3>单位TB, 总容量2734.08T, 经过最近的压缩和删除, 目前空间2300T左右, 85%</h3></div>
    <div id="main" style="width: 1200px;height:800px;margin: auto;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据 --------
        
        function colorMappingChange(value) {
            var levelOption = getLevelOption(value);
            chart.setOption({
                series: [{
                    levels: levelOption
                }]
            });
        }
        
        
        function getLevelOption() {
            return [{
                    itemStyle: {
                        borderColor: '#777',
                        borderWidth: 0,
                        gapWidth: 1
                    },
                    upperLabel: {
                        show: false
                    }
                },
                {
                    itemStyle: {
                        borderColor: '#555',
                        borderWidth: 5,
                        gapWidth: 1
                    },
                    emphasis: {
                        itemStyle: {
                            borderColor: '#ddd'
                        }
                    }
                },
                {
                    colorSaturation: [0.35, 0.5],
                    itemStyle: {
                        borderWidth: 5,
                        gapWidth: 1,
                        borderColorSaturation: 0.6
                    }
                }
            ];
        }
        
        option = {
            title: {
                text: 'Daas HDFS Usage',
                left: 'center'
            },
        
            tooltip: {
                
            },
        
            series: [{
                name: 'Daas HDFS Usage',
                type: 'treemap',
                visibleMin: 300,
                label: {
                    show: true,
                    formatter: '{b}'
                },
                upperLabel: {
                    show: true,
                    height: 30
                },
                itemStyle: {
                    borderColor: '#fff'
                },
                levels: getLevelOption(),
                data: [{
                "name": "数仓",
                "value": 1495.4,
                "parent": "",
                "children": [{
                        "name": "dts",
                        "value": 1,
                        "parent": "数仓",
                    },
                    {
                        "name": "数仓个人目录",
                        "value": 24.8,
                        "parent": "数仓",
        
                    },
                    {
                        "name": "DMS用户Hive目录",
                        "value": 142.7,
                        "parent": "数仓",
        
                    },
                    {
                        "name": "数据源",
                        "value": 1326.9,
                        "parent": "数仓",
                        "children": [{
                                "name": "admonitor",
                                "value": 563.5,
                                "parent": "数据源",
        
                            },
                            {
                                "name": "adserving",
                                "value": 260,
                                "parent": "数据源",
        
                            },
                            {
                                "name": "ids",
                                "value": 127.8,
                                "parent": "数据源",
        
                            },
                            {
                                "name": "tkm",
                                "value": 118.1,
                                "parent": "数据源",
        
                            },
                            {
                                "name": "tvmonitor",
                                "value": 71.3,
                                "parent": "数据源",
        
                            },
                            {
                                "name": "model",
                                "value": 41.9,
                                "parent": "数据源",
        
                            },
                            {
                                "name": "bia",
                                "value": 29.8,
                                "parent": "数据源",
        
                            },
                            {
                                "name": "adm_ivt",
                                "value": 29.6,
                                "parent": "数据源",
        
                            },
                            {
                                "name": "applist",
                                "value": 23.8,
                                "parent": "数据源",
        
                            },
                            {
                                "name": "dmpapi",
                                "value": 19.6,
                                "parent": "数据源",
        
                            },
                            {
                                "name": "segment",
                                "value": 16.4,
                                "parent": "数据源",
        
                            },
                            {
                                "name": "sitemonitor",
                                "value": 13.1,
                                "parent": "数据源",
        
                            },
                            {
                                "name": "cookiemapping",
                                "value": 5,
                                "parent": "数据源",
        
                            },
                            {
                                "name": "usergraph",
                                "value": 3.7,
                                "parent": "数据源",
        
                            },
                            {
                                "name": "ip_lbs",
                                "value": 1.3,
                                "parent": "数据源",
        
                            },
                            {
                                "name": "gaode_poi",
                                "value": 1,
                                "parent": "数据源",
        
                            },
                            {
                                "name": "userpulse",
                                "value": 1,
                                "parent": "数据源",
        
                            }
                        ]
                    }
                ]
            },
            {
                "name": "画像服务",
                "value": 14.9,
                "parent": "",
                "children": [{
                        "name": "Druid数据",
                        "value": 1,
                        "parent": "画像服务",
        
                    },
                    {
                        "name": "画像任务",
                        "value": 13.9,
                        "parent": "画像服务",
        
                    }
                ]
            },
            {
                "name": "谛听",
                "value": 493.3,
                "parent": "",
                "children": [{
                        "name": "职住标签",
                        "value": 1,
                        "parent": "谛听",
        
                    },
                    {
                        "name": "ott标签",
                        "value": 46.5,
                        "parent": "谛听",
        
                    },
                    {
                        "name": "标签服务",
                        "value": 53.8,
                        "parent": "谛听",
        
                    },
                    {
                        "name": "小宽表",
                        "value": 30.9,
                        "parent": "谛听",
        
                    },
                    {
                        "name": "模型服务",
                        "value": 361.1,
                        "parent": "谛听",
        
                    }
                ]
            },
            {
                "name": "dataplus",
                "value": 31.5,
                "parent": "",
                "children": [{
                        "name": "data2.0",
                        "value": 9,
                        "parent": "dataplus",
        
                    },
                    {
                        "name": "data1.0",
                        "value": 10,
                        "parent": "dataplus",
        
                    },
                    {
                        "name": "uv估算",
                        "value": 12.5,
                        "parent": "dataplus",
        
                    }
                ]
            },
            {
                "name": "位置数据",
                "value": 123.3,
                "parent": "",
                "children": [{
                        "name": "寻迹",
                        "value": 33.9,
                        "parent": "位置数据",
        
                    },
                    {
                        "name": "位置数据源",
                        "value": 44.1,
                        "parent": "位置数据",
        
                    },
                    {
                        "name": "POI相关",
                        "value": 45.3,
                        "parent": "位置数据",
        
                    }
                ]
            },
            {
                "name": "其他",
                "value": 182.5,
                "parent": "",
                "children": [{
                        "name": "回收站",
                        "value": 73,
                        "parent": "",
        
                    },
                    {
                        "name": "个人工作目录",
                        "value": 6.8,
                        "parent": "",
        
                    },
                    {
                        "name": "与算法组共享",
                        "value": 96.8,
                        "parent": "",
                        "children": []
                    },
                    {
                        "name": "各类二开跑数需求",
                        "value": 5.9,
                        "parent": "",
        
                    }
                ]
            }
        ]
        
            }]
        }

        // 使用刚指定的配置项和数据显示图表 -------------
        myChart.setOption(option);
    </script>
</body>
</html>